﻿@{
    ViewBag.Title = "Bundling and Minification";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

   <div><ol class="breadcrumb">
    <li><a href="/Home/Home/">Home</a></li>
    <li class="active">Bundling</li>
</ol>



<div id="definition">
    <h1>Introduction</h1>
    <p>
        Bundling and Minification is new feature in ASP.NET 4.5. This feature can help to reduce the size of javascript and css files and make the site perform faster.
    </p>
    <p><b>Bundling and Minification is performed at runtime</b></p>

    <ol style="padding-left: 30px;">
        <li>
            <b><p>Bundling</p></b>
            <ul>
                <li>-   Bundling is combine or Bundle  multiple files into a single file</li>
                <li>-   You can create CSS, JavaScript and other bundles</li>
                <li>-   A bundle is a logical group of files that is loaded with a single HTTP request.</li>
                <li>-   You can create style and script bundle for css and javascripts respectively by calling BundleCollection class Add() method with in BundleConfig.cs file.</li>
            </ul>
            <ul>

                <li>
                    <b><p>Methods</p></b>
                </li>
                <li>•	Add</li>
                <li>•	Clear</li>
                <li>•	GetBundleFor</li>
                <li>•	GetRegisteredBundles</li>
                <li>•	Remove</li>
                <li>•	ResetAll</li>
                <li>•	ResolveBundleUrl</li>
            </ul>
        </li>
        <li>
            <b><p>Minification</p></b>
            <ul>
                <li>Minification is technique for removing unnecessary characters (like white space, newline, tab) and comments from the JavaScript and CSS files to reduce the size which cause improved load times of a webpage. There are so many tools for minifying the .js and .css files.</li>
            </ul>
        </li>
    </ol>
</div>
<div id="generally">
    <p>
        <b>As a Normal Web Application Approach(Without Bundling and Minification) In a Default.aspx page</b>
    </p>

    <img src="~/Images/Bundling/bundling1.png" class="img-thumbnail" width=100% height=100% alt=""/>
    <p>With this you observe Default.aspx page carefully, you can see that client has 16 requests to server, 64.1 KB of data is transferred and it takes 826 ms to complete the request.</p>
    <p>To see all the process to how loadeded to the css and javascript follow this step in the browser</p>
    <div class="divcolor">
        <pre><code>Run the Site >> Press F12 >> Select Network</code></pre>
    </div>
    <p><b>and see the hows that process</b></p>
    <img src="~/Images/Bundling/bundling2.png" class="img-thumbnail" alt="without bundling used example" width="100%" height="100%" />
</div>
<div id="withbundling">
    <p>
        <b>-	With the Use of Bundling and Minification following steps to make a simple MVC Razor web application</b>
    </p>
    <p>-    Hierarchi of the BundleDemo</p>
    <p><img src="~/Images/Bundling/bundling.png" class="img-thumbnail" alt="without bundling used example" width="50%" height="50%" /></p>
    <ol style="padding-left: 30px;">
        <li>
            First install Bundling and Minification from the manage NuGetPackages
        </li>
        <li>
            Create script and style bundles using a class called “BundleConfig”. The following code shows the complete class:
        </li>
        <img src="~/Images/Bundling/bundling3.png" class="img-thumbnail" alt="without bundling used example" width="100%" height="100%" />
        <p>-    In ablove example used to the <b>Include()</b> that is useful for the one by one include css and javascript file and also include all directory used by the <b>IncludeDirectory()</b></p>
        <p><b>Also use With the Wildcard Character (*) can also be used to Select Files. </b></p>
        <img src="~/Images/Bundling/bundling4.png" class="img-thumbnail" alt="without bundling used example" width="100%" height="100%" />
        <li>
            After a BundleConfig.cs class created we need to register to Application_Start method in the Global.asax
        </li>
        <p><img src="~/Images/Bundling/bundling5.png" class="img-thumbnail" alt="without bundling used example" width="100%" height="100%" /></p>

        <li>
            Once the register done we need to add a reference into the Default.aspx
        </li>
        <p><img src="~/Images/Bundling/bundling6.png" class="img-thumbnail" alt="without bundling used example" width="100%" height="100%" /></p>

        <li>
            Bundling and minification are enabled, disabled by setting value of the debug attribute of Compilation Element in web.config file
        </li>
        <p>
            <pre><code>
&lt;system.web&gt;
    &lt;compilation debug="true" /&gt;
&lt;/system.web&gt;
                    </code></pre>
        </p>
        <li>
            Bundling and minification doesn't work in debug mode. So to enable to add below line of code with in Application_Start event of Global.asax
        </li>
        <p><img src="~/Images/Bundling/bundling7.png" class="img-thumbnail" alt="without bundling used example" width="100%" height="100%" /></p>
    </ol>
    <p>After the all step complete then the</p>
    <p>Let’s Rebuild the solution and run it and compare the result of bundling and Minification approach with the normal approach</p>
    <img src="~/Images/Bundling/bundling8.png" class="img-thumbnail" alt="without bundling used example" width="100%" height="100%" />
</div></div>
       